import { useState } from 'react';
import { Search, X } from 'lucide-react';
import { useAppContext, useAppActions } from '@/contexts/AppContext';

interface SearchBarProps {
  placeholder?: string;
}

export default function SearchBar({ placeholder = "搜索AI工具..." }: SearchBarProps) {
  const { state } = useAppContext();
  const { setSearchQuery } = useAppActions();
  const [isFocused, setIsFocused] = useState(false);

  const { searchQuery } = state;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 搜索逻辑已经通过 onChange 实时处理
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSearchQuery(value);
  };

  const handleClear = () => {
    setSearchQuery('');
  };

  return (
    <div className="relative max-w-2xl mx-auto animate-fade-in-delay">
      <form onSubmit={handleSubmit} className="relative">
        <div className={`relative overflow-hidden rounded-2xl bg-white/8 backdrop-blur-md border transition-all duration-300 ${
          isFocused 
            ? 'border-blue-400/50 shadow-lg shadow-blue-500/20' 
            : 'border-white/20 hover:border-white/30'
        }`}>
          {/* 搜索图标 */}
          <div className="absolute left-4 top-1/2 -translate-y-1/2 z-10">
            <Search className={`w-5 h-5 transition-colors duration-200 ${
              isFocused ? 'text-blue-300' : 'text-white/60'
            }`} />
          </div>

          {/* 输入框 */}
          <input
            type="text"
            value={searchQuery}
            onChange={handleInputChange}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            placeholder={placeholder}
            className="w-full pl-12 pr-12 py-4 bg-transparent text-white placeholder-white/50 focus:outline-none text-lg"
          />

          {/* 清除按钮 */}
          {searchQuery && (
            <button
              type="button"
              onClick={handleClear}
              className="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-white/10 transition-colors duration-200 opacity-0 animate-fade-in"
            >
              <X className="w-4 h-4 text-white/60 hover:text-white" />
            </button>
          )}

          {/* 聚焦时的光效 */}
          {isFocused && (
            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-blue-500/10 pointer-events-none opacity-0 animate-fade-in" />
          )}
        </div>

        {/* 搜索按钮 */}
        <button
          type="submit"
          className="absolute right-2 top-1/2 -translate-y-1/2 px-6 py-2 rounded-xl bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-semibold shadow-lg hover:shadow-blue-500/25 transition-all duration-200 hover:scale-105"
        >
          搜索
        </button>
      </form>

      {/* 搜索建议提示 */}
      {isFocused && !searchQuery && (
        <div className="absolute top-full mt-2 left-0 right-0 p-3 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 opacity-0 animate-fade-in">
          <p className="text-white/60 text-sm text-center">
            尝试搜索 "ChatGPT"、"图像生成" 或 "写作助手"
          </p>
        </div>
      )}
    </div>
  );
}